<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>clip-mask</title>
  </head>
  <body>
    <svg
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <rect x="0" y="0" width="100%" height="100%" fill="pink" />
      <!-- rect 覆盖在 cirlce 上半部分，circle 下半部在 clipPath 外，则不显示。rect 不会绘制 -->
      <defs>
        <clipPath id="clip1">
          <rect x="100" y="25" width="100" height="50" />
        </clipPath>
      </defs>
      <circle cx="150" cy="75" r="50" fill="red" clip-path="url(#clip1)" />
      <line x1="100" y1="75" x2="200" y2="75" stroke="black" />
    </svg>
    <svg
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <rect x="0" y="0" width="100%" height="100%" fill="pink" />
      <defs>
        <mask id="mask1">
          <rect x="100" y="75" width="100" height="50" fill="white" />
        </mask>
      </defs>
      <circle cx="150" cy="75" r="50" fill="red" mask="url(#mask1)" />
    </svg>

    <svg width="200" height="200" viewBox="-10 -10 120 120">
      <mask id="myMask">
        <!-- 白色像素下的所有内容都将可见 -->
        <rect x="0" y="0" width="100" height="100" fill="white" />

        <!-- 黑色像素下的所有内容都将不可见 -->
        <path
          d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z"
          fill="black"
        />
      </mask>

      <polygon points="-10,110 110,110 110,-10" fill="orange" />

      <!-- 应用此蒙版后，我们在圆圈中“打”一个心形孔 -->
      <circle cx="50" cy="50" r="50" mask="url(#myMask)" />
    </svg>
  </body>
</html>
